<template>
    <div class="dragBody">
        <el-drawer
        :visible.sync="drawer"
        :close-on-press-escape="false"
        @close="closeDrag"
        custom-class="dragBox"
        size="40"
        :show-close="showClose"
        :direction="direction">
            <div class="dragBody flex" v-if="isMobile">
                <div class="circleBox boxShadow flex">
                    <div class="itemBtn flex" @touchstart="onMouseDown('up',$event)" @touchend="onMouseUp('up',$event)"><el-button icon="el-icon-arrow-up" circle ></el-button></div>
                    <div class="itemBtn flex" @touchstart="onMouseDown('right',$event)" @touchend="onMouseUp('right',$event)"><el-button icon="el-icon-arrow-right" circle></el-button></div>
                    <div class="itemBtn flex" @touchstart="onMouseDown('left',$event)" @touchend="onMouseUp('left',$event)"><el-button icon="el-icon-arrow-left" circle></el-button></div>
                    <div class="itemBtn flex" @touchstart="onMouseDown('down',$event)" @touchend="onMouseUp('down',$event)"><el-button icon="el-icon-arrow-down" circle></el-button></div>
                </div>
            </div>
            <div class="dragBody flex" v-else>
                <div class="circleBox boxShadow flex">
                    <div class="itemBtn flex" @mousedown="onMouseDown('up',$event)" @mouseup="onMouseUp('up',$event)"><el-button icon="el-icon-arrow-up" circle ></el-button></div>
                    <div class="itemBtn flex" @mousedown="onMouseDown('right',$event)" @mouseup="onMouseUp('right',$event)"><el-button icon="el-icon-arrow-right" circle></el-button></div>
                    <div class="itemBtn flex" @mousedown="onMouseDown('left',$event)" @mouseup="onMouseUp('left',$event)"><el-button icon="el-icon-arrow-left" circle></el-button></div>
                    <div class="itemBtn flex" @mousedown="onMouseDown('down',$event)" @mouseup="onMouseUp('down',$event)"><el-button icon="el-icon-arrow-down" circle></el-button></div>
                </div>
            </div>
            <!-- <div class="dragBox">
                <div class="flex controlBox upDownComp2">
                    <button type="button" class="dragBgFirst" :class="up?'isUp':'up'"
                    @touchstart="upMouseDown('up',$event)" 
                    @touchmove="upMouseMove('up',$event)" 
                    @touchend="upMouseEnd('up',$event)"
                    ></button>
                    <button type="button" class="dragBgSecond" :class="retreat?'isRetreat':'retreat'"
                    @touchstart="upMouseDown('retreat',$event)" 
                    @touchmove="upMouseMove('retreat',$event)" 
                    @touchend="upMouseEnd('retreat',$event)"
                    ></button>
                </div>
                <div class="flex controlBox leftRughtComp2">
                    <button type="button" class="dragBgFirst" :class="left?'isLeft':'left'"
                    @touchstart="upMouseDown('left',$event)" 
                    @touchmove="upMouseMove('left',$event)" 
                    @touchend="upMouseEnd('left',$event)"
                    ></button>
                    <button type="button" class="dragBgSecond" :class="right?'isRight':'right'"
                    @touchstart="upMouseDown('right',$event)" 
                    @touchmove="upMouseMove('right',$event)" 
                    @touchend="upMouseEnd('right',$event)"
                    ></button>
                </div>
            </div> -->
        </el-drawer>
    </div>
</template>

<script>
import { manualCtrl, navCtrl, naigationStart, navigationEnd } from '../js/navigation';
import { displayJoystick } from '../js/joystick'
import { _isMobile } from '../js/methods'
export default {
    name: 'dragComponent',
    components:{

    },
    data(){
        return{
            drawer: this.$store.state.showDragModule,
            direction: 'btt',
            showClose: false,
            isMobile: false,

            up: false,
            retreat: false,
            left: false,
            right: false
        }
    },
    methods:{
        onMouseDown(type,eve){
            console.log(type,eve)
            eve.preventDefault();
            naigationStart(type);
        },
        onMouseUp(type, eve){
            console.log(type, eve);
            navigationEnd(type);
        },

        //鼠标按下
        upMouseDown(type, event){
            this.clickCtrl(type);
            event.preventDefault();
            return false;
        },
        upMouseMove(type, event){
            this.clickCtrl(type);
            event.preventDefault();
            return false;
        },
        // 点击指令公共函数
        clickCtrl(event){
            let that = this;
            if(event === 'up'){
                that.up = true;
                if(that.left){
                    manualCtrl({
                        linear: 0.4,
                        angular: 0.4
                    })
                }else if(that.right){
                    manualCtrl({
                        linear: 0.4,
                        angular: -0.4
                    });
                }else{
                    manualCtrl({
                        linear: 0.4,
                    });
                }
            }else if(event === "retreat"){
                that.retreat = true;
                if(that.left){
                    manualCtrl({
                        linear: -0.4,
                        angular: 0.4
                    });
                }else if(that.right){
                    manualCtrl({
                        linear: -0.4,
                        angular: -0.4
                    });
                }else{
                    manualCtrl({
                        linear: -0.4,
                    });
                }
            }else if(event === "left"){
                that.left = true;
                if(that.up){
                    manualCtrl({
                        linear: 0.4,
                        angular: 0.4
                    });
                }else if(that.retreat){
                    manualCtrl({
                        linear: -0.4,
                        angular: 0.4
                    });
                }else{
                    manualCtrl({
                        angular: 0.4
                    });
                }
            }else{
                that.right = true;
                if(that.up){
                    manualCtrl({
                        linear: 0.4,
                        angular: -0.4
                    });
                }else if(that.retreat){
                    manualCtrl({
                        linear: -0.4,
                        angular: -0.4
                    });
                }else{
                    manualCtrl({
                        angular: -0.4
                    });
                }
            }
        },

        upMouseEnd(type){
            let that = this;
           if(type === 'up'){
                that.up = false;
                if(that.left){
                    manualCtrl({
                        linear: 0.0,
                        angular: 0.4
                    });
                }else if(that.right){
                    manualCtrl({
                        linear: 0.0,
                        angular: -0.4
                    });
                }else{
                    manualCtrl({
                        linear: 0.0,
                    });
                }
            }else if(type === "retreat"){
                that.retreat = false;
                if(that.left){
                    manualCtrl({
                        linear: 0.0,
                        angular: 0.4
                    });
                }else if(that.right){
                    manualCtrl({
                        linear: 0.0,
                        angular: -0.4
                    });
                }else{
                    manualCtrl({
                        linear: 0.0,
                    });
                }
            }else if(type === "left"){
                that.left = false;
                if(that.up){
                    manualCtrl({
                        linear: 0.4,
                        angular: 0.0
                    });
                }else if(that.retreat){
                    manualCtrl({
                        linear: -0.4,
                        angular: 0.0
                    });
                }else{
                    manualCtrl({
                        angular: 0.0
                    });
                }
            }else{
                that.right = false;
                if(that.up){
                    manualCtrl({
                        linear: 0.4,
                        angular: 0.0
                    });
                }else if(that.retreat){
                    manualCtrl({
                        linear: -0.4,
                        angular: 0.0
                    });
                }else{
                    manualCtrl({
                        angular: 0.0
                    });
                }
            }
        },

        //关闭托盘
        closeDrag(){
            displayJoystick(false)
        }
    },

    mounted(){
        //判断是移动端还是PC端
        if (_isMobile()) {
            this.isMobile = true
        } else {
            this.isMobile = false
        }
    },
    
    //属性监听
    watch:{
       "$store.state.showDragModule": function(val){
           this.drawer = val;
       }
    }

}
</script>

<style scoped lang="less">
    .dragBody{
        width: 100%;
        margin: 30px 0 ;
        padding: 0 15px 0 23px;
        .circleBox{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            overflow: hidden;
            flex-wrap: wrap;
            transform:rotate(45deg);
            -ms-transform:rotate(45deg);
            -moz-transform:rotate(45deg);
            -webkit-transform:rotate(45deg);
            -o-transform:rotate(45deg);
            .itemBtn{
                width: 50%;
                height: 50%;
                button{
                    font-size: 24px;
                    border: none;
                    transform:rotate(-45deg);
                    -ms-transform:rotate(-45deg);
                    -moz-transform:rotate(-45deg);
                    -webkit-transform:rotate(-45deg);
                    -o-transform:rotate(-45deg);
                }
            }
        }
    }
    .dragBox{
        position: relative;
        display: inline;
    }
    .upDownComp2{
        position: fixed;
        z-index: 997;
        width: 50px;
        height: 140px;
        bottom: 85px;
        left: 75px;
    }
    .controlBox{
        justify-content: space-between;
        border-radius: 50%;
        flex-direction: column;
        -webkit-touch-callout:none;
        -webkit-user-select:none;
        -khtml-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
        user-select:none;
    }

    .leftRughtComp2{
        position: fixed;
        z-index: 997;
        width: 50px;
        height: 140px;
        right: 115px;
        bottom: 85px;
        transform:rotate(270deg);
        button{
            transform:rotate(90deg);
        }
    }
    .dragBgFirst,.dragBgSecond{
        width: 50px;
        height: 50px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
    
    .up{
        background-image: url("../../src/assets/icon-dragBtn-up-nor.png");
    }
    .retreat{
        background-image: url("../../src/assets/icon-dragBtn-down-nor.png");
    }
    .left{
        background-image: url("../../src/assets/icon-dragBtn-left-nor.png");
    }
    .right{
        background-image: url("../../src/assets/icon-dragBtn-right-nor.png");
    }
    .isUp{
        background-image: url("../../src/assets/icon-dragBtn-up-sel.png");
    }
    .isRetreat{
        background-image: url("../../src/assets/icon-dragBtn-down-sel.png");
    }
    .isLeft{
        background-image: url("../../src/assets/icon-dragBtn-left-sel.png");
    }
    .isRight{
        background-image: url("../../src/assets/icon-dragBtn-right-sel.png");
    }

</style>